<template>
  <div class="tickets-box">
    <!-- 工单表单 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="formRef">
      <el-collapse accordion>
        <el-collapse-item name="1">
          <template #title>
            <el-row>
              <el-col :span="8">
                <el-form-item label="单据日期" prop="orderDate" @click.stop.prevent="add()">
                  <el-date-picker
                    v-model="formInline.orderDate"
                    type="datetimerange"
                    start-placeholder="开始"
                    end-placeholder="结束"
                    format="YYYY-MM-DD"
                    date-format="YYYY/MM/DD HH:mm:ss"
                    time-format="HH:mm"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    :default-time="defaultTime"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="单据编号" prop="orderId">
                  <el-input v-model="formInline.orderId" clearable  @click.stop.prevent="add()"/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="客户名称" prop="customerId">
                  <el-select
                    v-model="formInline.customerId"
                    placeholder="请输入客户名称"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="item in customerList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4" >
                <el-form-item class="btn">
                  <el-button type="primary" @click="onSubmit" icon="Search">查询</el-button>
                  <el-button @click="onReset(formRef)" icon="Refresh">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
            <el-row style="padding-right: 21px">
              <el-col :span="4">
                <el-form-item label="终端门店" prop="customerStore">
                  <el-input v-model="formInline.customerStore" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="部门" prop="deptId">
                  <el-tree-select
                    v-model="formInline.deptId"
                    :data="deptOptions"
                    clearable
                    :props="{ value: 'id', label: 'label', children: 'children' }"
                    value-key="id"
                    placeholder="请选择归属部门"
                    check-strictly
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="客户类型" prop="customerType">
                  <el-select v-model="formInline.customerType" clearable>
                    <el-option label="标准流程" value="标准流程" />
                    <el-option label="外协流程" value="外协流程" />
                    <el-option label="散客" value="散客" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4" v-if="props.flagStatus">
                <el-form-item label="单据状态" prop="invoiceStatus">
                  <el-select v-model="formInline.invoiceStatus" clearable>
                    <el-option label="已完结" value="已完结" />
                    <el-option label="未完结" value="未完结" />
                    <el-option label="审核通过" value="已审核" />
                    <el-option label="待审核" value="待审核" />
                    <el-option label="审核中" value="审核中" />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="4" v-else>
                <el-form-item label="业务类型" prop="businessType">
                  <el-select v-model="formInline.businessType" clearable>
                    <el-option
                      :label="item.label"
                      :value="item.label"
                      v-for="item in selectBusiness"
                      :key="item.index"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          <el-row style="padding-right: 21px">
            <el-col :span="4" v-if="props.flagStatus">
              <el-form-item label="业务类型" prop="businessType">
                <el-select v-model="formInline.businessType" clearable>
                  <el-option
                    :label="item.label"
                    :value="item.label"
                    v-for="item in selectBusiness"
                    :key="item.index"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item label="制单人" prop="creator">
                <el-input v-model="formInline.creator" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="结款状态" prop="paymentStatus" v-if="props.invoiceStatusFlag">
                <el-select v-model="formInline.paymentStatus" clearable>
                  <el-option label="已收款" value="已收款" />
                  <el-option label="未收款" value="未收款" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>
<script setup>
import { reactive, onMounted, defineEmits, ref,watch } from 'vue'
import { inputSearchHandler } from '@/hook/inputChange'
import { getWorkApi, getdepartmentseApi } from '@/api/tickets/index.js'
import { deptTreeSelect } from '@/api/system/user'

let deptOptions = ref([])


// 显示搜索到的值
let { SearchHandler } = inputSearchHandler()
let emit = defineEmits(['subSearch'])
let formRef = ref(null)
let props = defineProps({
  flagStatus: {
    type: Boolean,
    default: true,
  },
  invoiceStatusFlag: {
    type: Boolean,
    default: true,
  },
})
// 表格数据
const formInline = reactive({
  orderDate: null,
  orderId: null,
  customerId: null,
  customerStore: null,
  deptId: null,
  customerType: null,
  invoiceStatus: null,
  businessType: null,
  creator: null,
  // charge: null,
})
// 业务类型
let selectBusiness = ref([
  {
    label: '物料类',
    index: 0,
  },
  {
    label: '门头',
    index: 1,
  },
  {
    label: '装修类',
    index: 2,
  },
  {
    label: '活动类',
    index: 3,
  },
  {
    label: '其他',
    index: 4,
  },
])

// 客户名称
let clientName = ref([])

// 部门下拉数据
let department = ref([])

// 提交
const onSubmit = () => {
  emit('subSearch', formInline)
}
// 封装请求下拉菜单信息
const getDropDownData = (res) => {
  let { code, data } = res
  if (code == 200) {
    return data
  }
}
let customerList = reactive([])

// 获取客户下拉菜单数据
const getWorkApiData = async () => {
  let params = { customerName: '' }
  let { code, data } = await getWorkApi(params)
  if (code == 200) {
    data.forEach((v) => {
      customerList.push({
        label: v.primaryClassification + '/' + v.customerName,
        value: v.customerId,
      })
    })
  }
}
// 获取部门下拉菜单数据
const getdepartmentseApiData = async (data = '') => {
  let params = { deptName: data }
  let res = await getdepartmentseApi(params)
  department.value = getDropDownData(res)
}
// 重置
const onReset = (v) => {
  if (!v) return
  v.resetFields()
}
/*查询部门下拉树结构 */
const getDeptTree = () => {
  deptTreeSelect().then((response) => {
    deptOptions.value = response.data
  })
}

onMounted(() => {
  getWorkApiData()
  getdepartmentseApiData()
  getDeptTree()
})
</script>

<style lang="scss" scoped>
.tickets-box {
  padding: 20px 16px;

  .el-collapse {
    --el-collapse-border-color: transparent !important;
  }
:deep(.el-form-item__label){
  width: 80px;
}
  .el-row {
    width: 100%;

    .el-col {
      text-align: left;
    }
  }

  :deep(.el-button) {
    width: 60px;
    height: 24px;
    font-size: 12px;
  }

  .el-form {
    .el-form-item {
      margin: 0;
      margin-bottom: 18px;
      width: 100%;
    }

    .btn {
      margin-left: 32px;
    }
  }
}
</style>
